/**
 * Created by Dalyn on 2017/3/12.
 * 交易记录--合同详情
 */
import React from "react";
import {hashHistory} from 'react-router';
import "./css/orderTradeInfo.css";
import Relay from "react-relay";
import OrderTradeInfoMutation from "../account/mutation/OrderTradeInfoMutation"

export default class OrderTradeInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            order: [],
            /*合同编号*/
            subOrders: [],
            oid: '',
            enid: "",
            /*后台错误提示*/
            hint: ""
        };
        this.oid = '';
        this.orderType = {
            "1": "成衣订单",
            "2": "辅料订单",
            "3": "面料订单",
            "4": "印染订单",
            "5": "纱线订单",
        }
    }

    myRelay() {
        /////console.log("请求=======")
        Relay.Store.commitUpdate(
            new OrderTradeInfoMutation({
                oid: this.oid,
                enid: this.state.enid
            }),
            {
                onFailure: () => {
                    console.log("请求失败")
                },
                onSuccess: (response) => {
                    let data = response.orderTradeInfo.orderTradeInfo;
                    // console.log(data)
                    if (data.errorCode === "0") {
                        this.setState({
                            order: data.order,
                            subOrders: data.subOrders
                        });
                    } else {
                        this.setState({
                            hint: data.value,
                        });
                    }
                }
            }
        );
    }

    componentWillMount() {
        ////console.log("=======>>>"+this.props.params.oid);
        if (!this.props.params.oid) {
            hashHistory.push('/')
        } else {
            this.oid = this.props.params.oid
            if (!this.oid) {
                hashHistory.push('/')
            } else {
                this.myRelay();
            }
        }
    }

    computePayRatio(account, payAccount) {
        if (!(!account && !payAccount)) {
            if (0 != account) {
                let payRatio = payAccount / account * 100;
                return payRatio.toFixed(2) + "%";
            }
        }
        return '100%';
    }

    /*数字千分制*/
    doubleFormat(obj) {
        if (!obj) {
            return obj;
        } else {
            return parseFloat(obj).toLocaleString();
        }
    }

    showSubOrders() {
        return this.state.subOrders.map((item, index) => {
            return (
                <li className="trade_purchase_cardbox clear">
                    <div className="trade_customer_cardbox_mbox">
                        <p className="trade_customer_cardbox_mp">
                            <i className="trade_customer_cardbox_mi"></i>
                            <span className="trade_customer_cardbox_mspanl">{this.doubleFormat(parseFloat(item.account / 100).toFixed(2))}</span>
                        </p>
                        <p className="trade_customer_cardbox_mtext">订单金额</p>
                    </div>
                    <div className="trade_customer_cardbox_mbox2">
                        <p className="trade_customer_cardbox_mp">
                            <i className="trade_customer_cardbox_mired"></i>
                            <span className="trade_customer_cardbox_mspanred">{this.doubleFormat(parseFloat(item.payAccount / 100).toFixed(2))}</span>
                        </p>
                        <p className="trade_customer_cardbox_mtext">已支付金额</p>
                    </div>
                    <ul className="trade_customer_cardbox_ul">
                        <li className="trade_customer_cardbox_li">
                            合&nbsp;&nbsp;同：
                            <span
                                className="trade_customer_cardbox_li_span">{item.signedContract == null ? "无" : item.signedContract}</span>
                        </li>
                        <li className="trade_customer_cardbox_li">
                            订单号：
                            <span className="trade_customer_cardbox_li_span">{item.oid}</span>
                        </li>
                        <li className="trade_customer_cardbox_li">
                            供应商：
                            <span className="trade_customer_cardbox_li_span">{item.partBName == null ? "无" : item.partBName}</span>
                        </li>
                        <li className="trade_customer_cardbox_li">
                            商品类型：
                            <span
                                className="trade_customer_cardbox_li_span">{this.orderType[item.orderType]}</span>
                        </li>
                        <li className="trade_customer_cardbox_li">
                            商品数量：
                            <span className="trade_customer_cardbox_li_span">{item.orderGoodsNum}</span>
                            件
                        </li>
                    </ul>
                    <div className="trade_customer_cardbox_line"></div>
                    <div className="trade_customer_cardbox_pro">
                        <p className="trade_customer_cardbox_prop">
                            <span className="trade_customer_cardbox_props">付款</span>
                            <span className="trade_customer_cardbox_props2">{this.computePayRatio(item.account, item.payAccount)}</span>
                        </p>
                        <div className="trade_customer_cardbox_prod1">
                            <div className="trade_purchase_cardbox_prod2" style={{width:(item.payAccount / item.account*100)+"%"}}></div>
                        </div>
                    </div>
                </li>
            )
        })
    }

    /*加载主合同信息*/
    render() {
        this.state.subOrders = this.state.subOrders?this.state.subOrders:0;
        return (
            <div className="trade">
                <div className="trade_customer">
                    <div className="trade_customer_cardhead">
                        <i className="trade_customer_cardhead_i"></i>
                        <p className="trade_customer_cardhead_p">
                            <span className="trade_customer_cardhead_span">客户</span>
                        </p>
                    </div>
                    <div className="trade_customer_cardbox clear">
                        <div className="trade_customer_cardbox_mbox">
                            <p className="trade_customer_cardbox_mp">
                                <i className="trade_customer_cardbox_mi"></i>
                                <span className="trade_customer_cardbox_mspan">{this.doubleFormat(parseFloat(this.state.order.account/100).toFixed(2))}</span>
                            </p>
                            <p className="trade_customer_cardbox_mtext">订单金额</p>
                        </div>
                        <div className="trade_customer_cardbox_mbox2">
                            <p className="trade_customer_cardbox_mp">
                                <i className="trade_customer_cardbox_mired"></i>
                                <span className="trade_customer_cardbox_mspanred">{this.doubleFormat(parseFloat(this.state.order.payAccount/100).toFixed(2))}</span>
                            </p>
                            <p className="trade_customer_cardbox_mtext">已支付金额</p>
                        </div>
                        <ul className="trade_customer_cardbox_ul">
                            <li className="trade_customer_cardbox_li">
                                合&nbsp;&nbsp;同：
                                <span
                                    className="trade_customer_cardbox_li_span">{this.state.order.signedContract == null ? "无" : this.state.order.signedContract}</span>
                            </li>
                            <li className="trade_customer_cardbox_li">
                                订单号：
                                <span className="trade_customer_cardbox_li_span">{this.state.order.oid}</span>
                            </li>
                            <li className="trade_customer_cardbox_li">
                                采购商：
                                <span className="trade_customer_cardbox_li_span">{this.state.order.partAName}</span>
                            </li>
                            <li className="trade_customer_cardbox_li">
                                商品类型：
                                <span
                                    className="trade_customer_cardbox_li_span">{this.orderType[this.state.order.orderType]}</span>
                            </li>
                            <li className="trade_customer_cardbox_li">
                                商品数量：
                                <span className="trade_customer_cardbox_li_span">{this.state.order.orderGoodsNum}</span>
                                件
                            </li>
                        </ul>
                        <div className="trade_customer_cardbox_line"></div>
                        <div className="trade_customer_cardbox_pro">
                            <p className="trade_customer_cardbox_prop clear">
                                <span className="trade_customer_cardbox_props">付款</span>
                                <span className="trade_customer_cardbox_props2">{this.computePayRatio(this.state.order.account,this.state.order.payAccount)}</span>
                            </p>
                            <div className="trade_customer_cardbox_prod1">
                                <div className="trade_customer_cardbox_prod2" style={{width:(this.state.order.payAccount / this.state.order.account*100)+"%"}}></div>
                            </div>
                        </div>
                    </div>
                </div>
                {/*style={{height:this.state.subOrders.length*282+100+"px"}}*/}
                <div className="trade_purchase">
                    <div className="trade_purchase_cardhead">
                        <i className="trade_purchase_cardhead_i"></i>
                        <p className="trade_customer_cardhead_p">
                            <span className="trade_customer_cardhead_span">原料采购</span>
                        </p>
                    </div>
                    <ol className="trade_purchase_ol">
                        {this.showSubOrders()}
                    </ol>
                </div>
            </div>
        )
    }
}
